<template>
  <div>
    <div class="setFocus_die">
      <div></div>
      <div>
        <div v-for="(item,index) in valueArr" :key="index" @click="navGitto(index)">
          <div>
            <img :src="item.imgSrc" alt />
            <span>{{item.name}}</span>
          </div>
          <div>
            <img src="http://www.zhaoshengku.net/wx-xz.png" alt />
          </div>
        </div>
      </div>
      <div @click="deleteCen">退出登录</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      valueArr: [
        {
          imgSrc: "http://www.zhaoshengku.net/wx-jibenziliao.png",
          name: "基本资料"
        },
        {
          imgSrc: "http://www.zhaoshengku.net/wx-bangding.png",
          name: "账号绑定"
        },
        {
          imgSrc: "http://www.zhaoshengku.net/wx-password.png",
          name: "密码修改"
        }
      ],
      yemianName: ["basedataFriends", "bindonAccount", "ChangePassword"]
    };
  },
  methods: {
    navGitto(e) {
      wx.navigateTo({
        url: "/pages/" + this.yemianName[e] + "/main"
      });
    },
    deleteCen() {
      wx.showModal({
        title: "提示",
        content: "确定退出登录吗？",
        success:res=> {
          if (res.confirm) {
            wx.setStorage({
              key: "koken",
              data: "0"
            });
            wx.showToast({
              title: "成功退出登录",
              icon: "true",
              duration: 1000,
              mask: true
            });
            setTimeout(function() {
              wx.switchTab({
                url: "/pages/index/main"
              });
            }, 1000);
            this.$store.state.openid=false;
          } else if (res.cancel) {
            return;
          }
        }
      });
    }
  },
  mounted() {
    // 设置头
    wx.setNavigationBarTitle({
      title: "设置中心"
    });
  }
};
</script>

<style scoped>
.setFocus_die > div:nth-child(1) {
  width: 100%;
  height: 10rpx;
  background: #dddddd;
}
.setFocus_die > div:nth-child(2) {
  padding-left: 32rpx;
  padding-right: 30rpx;
}
.setFocus_die > div:nth-child(2) > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 87rpx;
  border-bottom: 1rpx solid #dddddd;
}
.setFocus_die > div:nth-child(2) > div > div:nth-child(1) {
  display: flex;
  align-items: center;
}
.setFocus_die > div:nth-child(2) > div > div:nth-child(1) > img {
  width: 38rpx;
  height: 38rpx;
  margin-right: 30rpx;
}
.setFocus_die > div:nth-child(2) > div > div:nth-child(1) > span {
  font-size: 30rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.setFocus_die > div:nth-child(2) > div > div:nth-child(2) > img {
  width: 12rpx;
  height: 22rpx;
}
.setFocus_die > div:nth-child(3) {
  font-size: 34rpx;
  font-weight: bold;
  color: rgba(255, 0, 0, 1);
  width: 685rpx;
  height: 98rpx;
  text-align: center;
  margin: 0 auto;
  line-height: 98rpx;
  background: url("http://www.zhaoshengku.net/wx-%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%20%281%29.png")
    center center no-repeat;
  background-size: 100% 100%;
  margin-top: 600rpx;
}
</style>

